<template>
  <page-layout>
    <!-- 列表页面 -->
    <a-row :gutter="[10, 10]">
      <!-- 查询条件 -->
      <a-col :span="24">
        <a-card>
          <pro-query
            :searchParam="searchParam"
            @on-search="search"
          >
            <template #test="{ data }">
              <a-input v-model:value="data.test" type="text"/>
            </template>
          </pro-query>
        </a-card>
      </a-col>
      <!-- 用户列表 -->
      <a-col :span="24">
        <a-card>
          <pro-table
            ref="tableRef"
            :fetch="fetch"
            :columns="columns"
            :toolbar="toolbar"
            :operate="operate"
            :param="state.param"
            :pagination="pagination"
            :row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange }">
          </pro-table>
        </a-card>
      </a-col>
    </a-row>
    <!-- 新增/修改页面 -->
    <save :visible="state.visibleSave" @close="closeSave" :record="state.record"></save>
    <a-modal v-model:visible="uplodaView" title="Basic Modal" @ok="handleOk">
      <a-upload
        v-model:file-list="fileList"
        name="file"
        action="http://192.168.0.145:9292/api/sys/qu/import"
        :headers="headers"
        @change="handleChange"
      >
        <a-button>
          <upload-outlined></upload-outlined>
          Click to Upload
        </a-button>
      </a-upload>
    </a-modal>
  </page-layout>
</template>

<script>
import save from './modal/save';
import {quPaging,removeBatch} from "@/api/module/exam.js";
import {reactive,  createVNode,ref} from 'vue';
import { message , modal} from 'ant-design-vue';
import { ExclamationCircleOutlined ,UploadOutlined} from '@ant-design/icons-vue';
import {exportExcel} from "../../api/module/exam";

const removeKey = "remove";
const removeBatchKey = "removeBatch";

export default {
  components: {
    save,
    UploadOutlined,
  },
  setup() {

    const tableRef = ref();
    const uplodaView = ref(false);

    /// 查询用户
    const fetch = async (param) => {
      let dataParam = {
        current: 1,
        size: 10,
      }
      var response = await quPaging(dataParam);
      return {
        total: response.data.total,
        data: response.data.records,
      };
    };
    const removeQuestions = (ids) => {

      modal.confirm({
        title: '您是否确定要删除选择用户?',
        icon: createVNode(ExclamationCircleOutlined),
        okText: '确定',
        cancelText: '取消',
        onOk() {
          message.loading({ content: "提交中...", key: removeBatchKey });
          removeBatch({"ids":ids}).then((response) => {
            if(response.success){
              message.success({content: "删除成功", key: removeBatchKey, duration: 1}).then(() =>
                tableRef.value.reload()
              )
            }else{
              message.error({content: "删除失败", key: removeBatchKey, duration: 1})
            }
          })
        }
      });
      console.log("所有ID+",ids)
    }
    /// 工具栏
    const toolbar = [
      {
        label: "新增", event: function () {
          state.visibleSave = true
        }
      },
      {
        label: "删除", event: function () {
          removeQuestions(state.selectedRowKeys)
        }
      },
      {
        label: "导出", event: function () {
          let param = {
            "content": "",
            "quType": "",
            "repoIds": []
          }
          // 导出当前查询的数据
          exportExcel(param);
        }
      },
      {
        label: "导入", event: function () {
          uplodaView.value = true

        }
      },
      // {
      //   label: "加入题库", event: function () {
      //   }
      // },
      // {
      //   label: "移出题库", event: function () {
      //   }
      // },
    ];
    const handleOk = e => {
      console.log(e);
      uplodaView.value = false;
    };

    /// 行操作
    const operate = [
      // {
      //   label: "查看", event: function (record) {
      //     state.visibleInfo = true , state.recordInfo = record
      //   }
      // },
      {
        label: "修改", event: function (record) {
          state.visibleSave = true , state.record = record
        }
      },
    ];
    /// 文本转换
    const converFormat = [{label: "单选题", value: 1}, {label: "多选题", value: 2}, {label: "判断题", value: 3}];
    /// 配置
    const columns = [
      {dataIndex: "content", key: "content", title: "题目内容"},
      {dataIndex: "quType", key: "quType", title: "题目类型", conver: converFormat},
      {dataIndex: "createTimeS", key: "createTimeS", title: "创建时间"},
    ];
    /// 分页参数
    const pagination = {pageNum: 1, pageSize: 10}
    /// 外置参数
    const state = reactive({
      selectedRowKeys: [],
      param: {},
      record: {},
      visibleSave: false,
      visibleEdit: false,
      visibleGive: false,
      visibleInfo: false,
      recordEdit: {},
      recordGive: {},
      recordInfo: {},
    })
    /// 查询参数
    const searchParam = [
      {
        key: "state", type: "select", label: "题目类型", value: "",
        options: [
          {text: "单选题", value: 1},
          {text: "多选题", value: 2},
          {text: "判断题", value: 3}
        ]
      },
      {
        key: "state", type: "select", label: "选择题库", value: "",
        options: [
          {text: "全部", value: ""},
          {text: "成功", value: true},
          {text: "失败", value: false}
        ]
      },
      {key: "code", type: "input", label: "题目内容"},
    ]
    /// 选择操作
    const onSelectChange = selectedRowKeys => {
      state.selectedRowKeys = selectedRowKeys;
    };
    /// 查询操作
    const search = function (value) {
      state.param = value;
      tableRef.value.reload();
    }
    /// 关闭新增
    const closeSave = function () {
      state.visibleSave = false;
      tableRef.value.reload();
    }

    // 导入
    const handleChange = info => {
      if (info.file.status !== 'uploading') {
        console.log(info.file, info.fileList);
      }

      if (info.file.status === 'done') {
        message.success(`${info.file.name} 文件上传成功`);
      } else if (info.file.status === 'error') {
        message.error(`${info.file.name} 文件上传失败`);
      }
    };

    const fileList = ref([]);
    const tokenKey = localStorage.getItem("token_key");
    const token = localStorage.getItem("token")

    const headers = {
      "Authorization": token,
      "Authorization-key": tokenKey
    };

    return {
      state,
      fetch,
      search,
      toolbar,
      columns,
      operate,
      pagination,
      searchParam,
      onSelectChange,
      closeSave,
      tableRef,
      uplodaView,
      handleOk,

      // 导入
      fileList,
      headers,
      handleChange,
    };
  },
};
</script>
<style lang="less">
.full-modal {
  .ant-modal {
    max-width: 80%;
    top: 0;
    padding-bottom: 0;
    margin: 3% 3% 3% 10%;
  }

  .ant-modal-content {
    display: flex;
    flex-direction: column;
    height: calc(80vh);
  }

  .ant-modal-body {
    flex: 1;
  }
}

.cardOne {
  width: 100%;
  margin: 1%;
}
</style>
